<template>
  <div class="home-banner">
    <div class="swiper">
      <div class="swiper-slide" v-for="item in bannerList" :key="item.id">
        <img :src="item.imgUrl" alt="">
      </div>
      <!-- <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div> -->
    </div>
  </div>
</template>
<script setup>
import  {ref} from 'vue'
import { findBanner } from '../../../api/home';
import Swiper from 'swiper/swiper-bundle.min.js';
import 'swiper/swiper-bundle.min.css';

const bannerList=ref([])
async function loadBannerList (){
  const res=await findBanner()
  bannerList.value=res.data.result
  console.log('bannerList',bannerList.value);
}
loadBannerList ()
</script>
<style scoped lang='less'>
.home-banner {
  width: 1240px;
  height: 500px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 98;
}
.swiper {
  display: flex;
  overflow: hidden;
}
</style>